/**
 * immutable - 不可变数据
 *
 * mutable   - 可变数据
 *
 *
 * 让 immutable 数据，更好去操作的库
 *    1. immutable.js
 *    2. immerjs  【推荐】
 *
 *
 * immer produce
 *
 *    语法：
 *      1. 普通语法
 *      const nextState = produce(currentState, (draftState) => {...})
 *        currentState - 基准数据，要基于的数据
 *        draftState   - 基准数据一份代理
 *        draftState 所在的这个函数会立刻执行，根据函数中编写的代码来生成最新的 nextState
 *      2. 柯里化
 *      const function = produce((draftState, ...reset) => {...})
 *        draftState 所在的这个函数不会立刻执行。
 *        最终返回的内容是一个函数，调用该返回的函数，才会将 draftState 所在函数去执行
 *        function({ name: 'zhagnsan' })
 *        function({ name: '里斯' })
 *
 *
 */

import { connect } from "react-redux";

function App({ todos, onChange }) {
  return (
    <div>
      <h1>App</h1>
      <ul>
        {todos.map((item) => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={item.done}
              onChange={() => onChange(item.id)}
            />
            {item.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

const mapStateToProps = (state) => ({
  todos: state.todos,
});

const mapDispatchToProps = {
  onChange: (id) => ({ type: "TOGGLE", id: id }),
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
